<template>
  <div>
    <a-card>
      <a-descriptions :title="bookInfo.name" bordered size="middle">
        <template #extra>
          <a-button type="primary" @click="handleUpdate">编辑</a-button>
        </template>
        <a-descriptions-item label="出版日期">{{ formatMonth(bookInfo.publicationDate) }}</a-descriptions-item>
        <a-descriptions-item label="作者">{{ bookInfo.author }}</a-descriptions-item>
        <a-descriptions-item label="库存">18</a-descriptions-item>
        <a-descriptions-item label="价格">￥ {{ bookInfo.price }}</a-descriptions-item>
        <a-descriptions-item label="折扣">8.5</a-descriptions-item>
        <a-descriptions-item v-if="bookInfo.meta" label="创建时间">{{
            formatDate(bookInfo.meta.createAt)
          }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </div>
  <a-modal :visible="dialogFormVisible" title="编辑"
           @cancel="dialogFormVisible = false"
           @ok="updateBookInfo">
    <a-form :label-col="{span: 7}">
      <a-form-item label="书名">
        <a-input v-model:value="bookInfo.name"/>
      </a-form-item>
      <a-form-item label="作者">
        <a-input v-model:value="bookInfo.author"/>
      </a-form-item>
      <a-form-item label="出版日期">
        <a-month-picker v-model:value="bookInfo.publicationDate"
                        format="YYYY-MM"
                        placeholder="选择日期"/>
      </a-form-item>
      <a-form-item label="类别">
        <a-input v-model:value="bookInfo.type"/>
      </a-form-item>
      <a-form-item label="价格">
        <a-input-number
          v-model:value="bookInfo.price"
          :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
          :parser="value => value.replace(/\$\s?|(,*)/g, '')"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { Button, Card, DatePicker, Descriptions, Form, Input, InputNumber, message, Modal } from 'ant-design-vue'
import { onMounted, ref } from 'vue'
import { fetchBookDetail, updateBook } from '@/api/book'
import { useRoute } from 'vue-router'
import { deepClone, formatDate, formatMonth } from '../../utils'
import moment from 'moment'

export default {
  name: 'BookDetail',
  components: {
    ACard: Card,
    AButton: Button,
    ADescriptions: Descriptions,
    ADescriptionsItem: Descriptions.Item,
    AModal: Modal,
    AForm: Form,
    AFormItem: Form.Item,
    AInput: Input,
    AMonthPicker: DatePicker.MonthPicker,
    AInputNumber: InputNumber,
  },
  setup () {
    const dialogFormVisible = ref(false)
    const bookInfo = ref({})
    const route = useRoute()
    const id = route.params.id
    onMounted(async () => {
        await getDetail()
      },
    )
    const handleUpdate = async () => {
      bookInfo.value.publicationDate = moment(bookInfo.value.publicationDate)
      dialogFormVisible.value = true
    }
    const updateBookInfo = async () => {
      const temp = deepClone(bookInfo.value)
      temp.publicationDate = bookInfo.value.publicationDate.valueOf()
      temp.id = bookInfo.value._id
      await updateBook(temp).then(res => {
          message.success(res.msg)
          dialogFormVisible.value = false
        },
      )
      await getDetail()
    }
    const getDetail = async () => {
      await fetchBookDetail(id).then(res => {
          bookInfo.value = res.data
          bookInfo.value.publicationDate = moment(bookInfo.value.publicationDate)
        },
      )
    }
    return {
      dialogFormVisible,
      bookInfo,
      formatDate,
      formatMonth,
      updateBookInfo,
      handleUpdate,
    }
  },
}
</script>

<style scoped>

</style>
